<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>源辰-零食网商品详细</title>
<meta name="keywords" content="小吃,美食,零食,源辰" />
<meta name="description" content="各种小吃美食，应有尽有" />
<link href="images/yc.png" rel="shortcut icon" type="image/x-icon" />
<link href="css/header.css" rel="stylesheet" type="text/css" />
<link href="css/index.css" rel="stylesheet" type="text/css" />
<link href="css/footer.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/detail.css" type="text/css" >
</head>

<body>
<!-- 顶部区域 -->
<header id="header">
	<!-- 顶部标题区域 -->
	<div class="htitle">
    	<a href="#" target="_blank" class="location">衡阳</a>
    	
        <div class="header-info" id="login_info">
            <div class="login-info">
            	<a v-if="isLogin" href="user.html" title="个人信息" target="_blakn">欢迎您：{{nickName}}</a>
                <a v-else href="login.html" title="点击登录">您好，请登录</a>
                <a href="register.html" title="点击注册"> 免费注册 </a>
            </div>
            
            <div class="person-info">
            	<span>|</span>
            	<a href="front/order.html" target="_blank">我的订单</a>
                <span>|</span>
                <a href="#" target="_blank">我的小吃</a>
                <span>|</span>
                <a href="#" target="_blank">客户服务</a>
                <span>|</span>
           		<a href="#" target="_blank">个人信息</a>
            </div>
        
        </div>
    </div>
    
    <!-- 顶部搜索区域 -->
    <div class="search">
    	<div class="search_left">
    		<a href="index.html" title="首页">
            	<img src="images/logo.png" width="260px" height="120px"/> 
            </a>
        </div>
        
        <div class="search_right">
        	<div class="search_top">
                <div class="search_div">
                    <input type="search" class="search-ipt" placeholder="请输入要搜索的内容" id='search_gname'/>
                    <input type="button" class="search-btn" @click="search"/>  
                </div>
                <div class="buycart">
                	<i class="iconfont">{{cartCount}}</i>
                    <a href="front/cart.html" target="_blank">我的购物车</a>
                </div>
            </div>

            <!-- 类型渲染 -->
            <div class="search_item" id="search_item">
            	<a href="javascript:void(0)" class="selected" @click="findByTno(0, '')">全部</a>
            	<a href="javascript:void(0)" v-for="(type, index) in types" 
            		@click="findByTno(index + 1, type.tno)" :data-tno="type.tno">{{type.tname}}</a>
            		<!-- vue给标签绑定自定义数据 ： data-tno -->
            </div>
        </div>
    </div>
</header>

     
<!-- 面包屑导航 --> 
<div class="breadcrumb" id="breadcrumb">
    <a href="javascript:void(0)">全部分类</a>
    <span>&gt;</span>
    <a href="javascript:void(0)" id="goods_type"></a>
    <span>&gt;</span>
    <a href="javascript:void(0)">商品详情</a>
 </div>
     
<!-- 商品展示 -->
<div  id="app">
<div class="goods_details_con clearfix">
    <div class="goods_details_pic fl" id="goods_pics">
        <img v-for="pic in pics" :src="pic">
    </div>
    <div class="goods_details_list fr">
        <h3>{{goods.gname}}</h3>
        <p>{{goods.intro}}</p>
        <div class="price_bar">
            <span class="show_price">&yen;<em>{{goods.price}}</em>元</span>
            <span class="show_unit">单位：<em>{{goods.weight}}</em></span>
        </div>
        <div class="goods_num clearfix">
            <div class="num_name fl">数量：</div>
            <div class="num_add fl">
                <input type="text" class="num_show fl" value="1" id="goods_count" v-model="nums">
                <a href="javascript:void(0)" class="add fr" @click="addCount(1)">+</a>
                <a href="javascript:void(0)" class="minus fr" @click="addCount(-1)">-</a>	
            </div>
            <div class="balance_cls">仓库量<span id="store_num">{{goods.balance}}</span>{{goods.unit}}</div>
        </div>
        <div class="total">总价：<em>16.80</em>元</div>
        <div class="operate_btn">
            <a href="javascript:;" class="buy_btn" id="buy_btn">立即购买</a>
            <a href="javascript:void(0);" class="add_cart" id="add_cart" @click="addCart()">加入购物车</a>				
        </div>
    </div>
</div>

<!-- 商品详情 -->
<div class="main_wrap clearfix">
    <div class="l_wrap fl clearfix">
        <div class="new_goods">
            <h3>新品推荐</h3>
            <ul>
                <li>
                    <a href="#"><img src="images/goods/good01.jpg"></a>
                    <h4><a href="#">零食大礼包</a></h4>
                    <div class="prize">&yen;3.90</div>
                </li>
                <li>
                    <a href="#"><img src="images/goods/good02.jpg"></a>
                    <h4><a href="#">多味泡泡糖</a></h4>
                    <div class="prize">&yen;16.80</div>
                </li>
            </ul>
        </div>
    </div>

    <div class="r_wrap fr clearfix">
        <ul class="detail_tab clearfix">
            <li class="active">商品介绍</li>
            <li>评论</li>
            <li>推荐</li>
        </ul>

        <div class="tab_content">
            <dl>
                <dt>商品详情：</dt>
                <!-- v-html -->
                <dd v-html="goods.descr"></dd>
            </dl>
        </div>
		</div>
    </div>
</div>
<!-- 提示信息
<div class="popup_con">
	<div class="popup">
		<p id="popup_info"></p>
	</div>
</div>   
 --> 
<!-- 版权所有 -->
<footer>
	<div class="foot_link">
        <a href="#">关于我们</a> <span> | </span>
        <a href="#">联系我们</a> <span> | </span>
        <a href="#">招聘广告</a> <span> | </span>
        <a href="#">友情链接</a>
    </div>
    <p>CopyRight &copy; 2019 <a class="copy" href="http://www.hyycinfo.com" target="_blank">衡阳市源辰信息科技有限公司</a> All Rights Reserverd</p>
    <p>电话：0734-8355998 湘ICP备16015987号-1</p>
</footer>
<script src="js/jquery-3.4.1.min.js"></script>


<!-- 依次引入相关JS文件 -->
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/axios.js"></script>
<script type="text/javascript" src="js/qs.js"></script>
<!-- 引入检查登录和类型 购物车 公共js文件 -->
<script type="text/javascript" src="js/base.js"></script>


<script type="text/javascript">
let gno; //查询的商品编号
let app = new Vue({
	el:"#app",
	data:{
		goods:{},
		nums:1, //商品数量
		pics:[], //轮播图片
	},
	mounted(){
		gno = decodeURI(location.search); //?7&大白兔奶糖
		if( gno == "" || gno.indexOf("&") <= 0){  //说明请求地址数据有问题 返回首页
			location.href = "index.html";
			return;
		}
		gno = gno.replace("?", "").split("&"); //分成两个数组 7 , 大白兔奶糖
		$("#goods_type").text( gno[1]); //商品名称
		gno = gno[0]; //商品编号
		//发送请求查询商品详情
		axios.post("goods/findByGno", qs.stringify({gno})).then(result =>{
		if(result.status == 200 && result.data.code == 200){  //请求和响应都是成功
			this.goods = result.data.data; //绑定vue对象中data属性的数据集
			//轮播图片待处理
			this.pics = result.data.data.pics.split(";") //将图片字符串分割成数组
			this.$nextTick(function(){
				showPics(); //当vue第一次渲染完成 执行该方法
			})
		}
	})
	},
	methods:{
		addCount( num ){ //数量变化
			if(num == -1 && this.nums == 1 ){ //说明不能再减少了 最低值 1
				return;
			}
			if(num == 1 && this.nums >= this.goods.balance ){ //说明不能再增加了 最大值为仓库库存
				return;
			}
			this.nums = parseInt( this.nums ) + num;
		},
		addCart(){ //加入购物车
			//登录检测验证
			if( !login.$data.isLogin){//说明没有登录
				showMsg("请先登录...", "red", function(){ location.href = "login.html";});
				return;
			}
		
			//TODO 判断当前用户的购物车 中是否存在 该商品
			//说明 购物车中有该商品 update 修改数量
			if( login.$data.cartCount > 0){ //此时购物车存在商品
				let lcarts = login.$data.carts;// 获取当前用户的购物车信息
				for( let i = 0, len = lcarts.length; i < len; i ++){ //循环遍历
					//当购物车商品编号和购买编号一致时，说明是同一商品 则执行 更新 购物车中该商品的数量
					if( lcarts[i].gno == this.goods.gno){
						axios.post("cart/update", qs.stringify({num: this.nums, cno: lcarts[i].cno})).then(result =>{
							if(result.status == 200 && result.data.code == 200){  //请求和响应都是成功
								showMsg("加入购物车成功...", "green");
							}else{
								showMsg("加入购物车失败...", "red");
							}
						})
						return;
					}	
				}
			}
			//购物车无该商品 insert 添加一条购物车信息
			axios.post("cart/add", qs.stringify({gno: this.goods.gno, num: this.nums, mno: login.$data.loginId})).then(result =>{
				if(result.status == 200 && result.data.code == 200){  //请求和响应都是成功
					showMsg("加入购物车成功...", "green");
					//将当前商品同步到购物车列表中
					login.$data.carrtCount += 1; //购物车商品种类
					let new_cart ={}; //新的商品信息
					new_cart.cno = result.data.data;
					new_cart.gno = this.goods.gno;
					login.$data.carts.push( new_cart ); //同步信息
				}else{
					showMsg("加入购物车失败...", "red");
				}
			})
		}
	}

})

//当vue第一vi渲染完成 执行该方法 显示轮播图
function showPics(){
	let imgLen = $("#goods_pics>img").length; //获取商品图片信息
	if( imgLen > 1){ //说明有多张图 实现图片轮播
		let i = 0;
		setInterval( ()=>{
			$("#goods_pics>img").css("display", "none");
			$("#goods_pics>img").eq(i).css("display", "block");
			i = (i + 1) % imgLen;
		}, 2000)
	}
}

</script>
<!-- 
<script>
function addCount(num) {
	var nums = parseInt($("#goods_count").val());
	var store_num = parseInt($("#store_num").val());
	nums += parseInt(num);
	if (nums <= 0) {
		$("#goods_count").val(1);
		return;
	}
	
	if (nums > store_num){
		$("#goods_count").val(store_num);
		return;
	}
	$("#goods_count").val(nums);
}

function addCart() {
	$("#popup_info").text("加入购物车成功...");
	$('.popup_con').fadeIn('fast', function() {
		setTimeout(function(){
			$('.popup_con').fadeOut('fast',function(){
				// location.href = 'alipay/pay/' + data.msg +"/" + price;
			});	
		}, 2000)
	});
}
</script>
 -->
</body>
</html>
